<template>
	<view class="uni_box">
		<view class="newcontent">
			<!-- 头部 -->
			<Nheader @leftClick="leftClick" @connectWallet="connectWallet" :cont="cont" @gettantwo="gettantwo"></Nheader>
			<view class="mbt">
				<text class="zichan">{{ $t('i.我的资产') }}</text>
				<view class="ziview">
					<image class="caibg" src="/static/new/caibg.png" />
					<view class="chanitem">
						<view class="chanview">
							{{ $t('i.当前资产') }}
						</view>
						<text class="zunum"><text class="zunums">{{ mybal }}</text>USDT</text>
						<view class="zibtn" @click="shushow = true">{{ $t('i.增加资产') }}</view>
					</view>
				</view>
			</view>
			<view class="bmview">
				<image class="mbg" src="/static/new/mbg.png" />
				<view class="bmitem">
					<text class="bmtit">{{ $t('i.复利') }}</text>
					<text class="bmgui">{{ $t('i.复利描述') }}</text>
					<text class="bmgui">{{ $t('i.复利百分比') }}</text>
					<!-- <view class="gju">
							<text class="guiitem">3{{$t('i.天')}}，7{{$t('i.天')}}，15{{$t('i.天')}}，30{{$t('i.天')}}，60{{$t('i.天')}}</text>
						</view>
						<text class="rihua">{{$t('i.日化')}}</text> -->
				</view>
			</view>
			<view class="bang">
				<view class="bone">
					<view class="boitem " :class="isactive == 1 ? 'bactive' : ''" @click="getactive(1)">{{ $t('i.投资列表') }}</view>
					<view class="boitem" :class="isactive == 2 ? 'bactive' : ''" @click="getactive(2)">{{ $t('i.赎回列表') }}</view>
				</view>
				<view class="pai">
					<view class="one hname">{{ $t('i.序号') }}</view>
					<view class="two hname">{{ $t('i.日期') }}</view>
					<view class="three hname">{{ $t('i.本息') }}</view>
					<view class="four hname">{{ $t('i.倒计时') }}</view>
				</view>
				<view class="pai tnav" v-if="isactive == 1" v-for="(item, index) in notWithdrawn" :key="index">
					<view class="one hmiao">
						<text class="shuzu">{{ item.index }}</text>
					</view>
					<view class="two hmiaotwo txt">
						<view class="riqiinav">
							<text class="riqi txt">{{ formatTime(item.startTime) }}</text>
							<view class="shu lvse">{{ $t('i.入') }}</view>
						</view>
						<view class="riqiinav">
							<text class="riqi txt">{{ formatTime(item.expireTime) }}</text>
							<view class="shu hongse">{{ $t('i.赎') }}</view>
						</view>
					</view>
					<view class="three hmiaotwo txt">
						<view class="riqiinav">
							<text class="price">{{ item.amount.toFixed(2) }}</text>
							<view class="shu lvse">{{ $t('i.本') }}</view>
						</view>
						<view class="riqiinav">
							<text class="pricered">+{{ item.interest.toFixed(2) }}</text>
							<view class="shu hongse">{{ $t('i.息') }}</view>
						</view>
					</view>
					<view class="four hmiaotwo txt">

						<view class="shubtn" v-if="Math.floor(Date.now() / 1000) >= item.expireTime"
							@click="getBack(item.index)">{{ $t('i.立即赎回') }}</view>
						<view class="tianshu" v-else>
							<text class="tian">{{ item.remainDays + $t('i.天') }}</text>
							<u-count-down :show-days="false" :timestamp="item.timestamp" font-size="24" color="#39CC77"
								bg-color="#2B313D" separator-color="#39CC77"></u-count-down>
						</view>
						<!-- <view class="shubtn shuhui" v-else-if="isactive==2">{{$t('i.已赎回')}}</view> -->

					</view>
				</view>
				<view class="pai tnav" v-if="isactive == 2" v-for="(item, index) in withdrawn" :key="index">
					<view class="one hmiao">
						<text class="shuzu">{{ item.index }}</text>
					</view>
					<view class="two hmiaotwo txt">
						<view class="riqiinav">
							<text class="riqi txt">{{ formatTime(item.startTime) }}</text>
							<view class="shu lvse">{{ $t('i.入') }}</view>
						</view>
						<view class="riqiinav">
							<text class="riqi txt">{{ formatTime(item.expireTime) }}</text>
							<view class="shu hongse">{{ $t('i.赎') }}</view>
						</view>
					</view>
					<view class="three hmiaotwo txt">
						<view class="riqiinav">
							<text class="price">{{ item.amount.toFixed(2) }}</text>
							<view class="shu lvse">{{ $t('i.本') }}</view>
						</view>
						<view class="riqiinav">
							<text class="pricered">+{{ item.interest.toFixed(2) }}</text>
							<view class="shu hongse">{{ $t('i.息') }}</view>
						</view>
					</view>
					<view class="four hmiaotwo txt">
						<view class="shubtn shuhui">{{ $t('i.已赎回') }}</view>

					</view>
				</view>
			</view>
		</view>

		<u-popup v-model="shushow" mode="bottom" @close="shushow = false">
			<view class="shupop">
				<view class="guan">
					<image class="btn_close" src="/static/new/btn_close.png" @click="shushow = false" />
				</view>
				<view class="zhu">
					<view class="zhuitem">{{ $t('i.账户市值总额') }}{{ myedu }} U，{{ $t('i.当前剩余') }} {{ shengyu }} U</view>
				</view>
				<view class="dayview">
					<view class="dayitem" :class="item.id=='9'?'widthauto':''" v-for="(item, index) in days" :key="index">
						<view class="daynum" :class="dayid == item.id ? 'hong' : item.optional ? 'white' : ''" @click="getday(item)">
							{{ item.num + $t('i.天') }}{{ item.id=='9'?$t('i.流动性'):'' }}</view>
						<!-- <view class="daynum" :class="index==0?'hong':index>=6?'white':''">{{(index+1)*3}}{{$t('i.天')}}</view> -->
					</view>
				</view>
				<view class="shupop">
					<view class="shuone">
						<text class="shuname">{{ $t('i.shuname') }}USDT</text>
						<text class="yue">{{ $t('i.余额') }}:{{ usdtbal }}</text>
					</view>
					<view class="shuusdt">
						<u-input v-model="value" type="text" :border="false" :placeholder="$t('i.输入')" />
						<text class="danwei">USDT</text>
					</view>
					<text class="shiname">{{ gettian(dayid) + $t('i.天可增值') }}<text
							class="shinum">{{ getshouyi(dayid) }}%</text>{{ $t('i.的市值') }}</text>
					<view class="quebtn" @click="getbtn">{{ $t('i.确定') }}</view>
				</view>
			</view>
		</u-popup>

		<!-- 邀请弹窗 -->
		<u-popup v-model="yaoshow" mode="center" width="75%" @close="yaoshow = false" z-index="20075">
			<view class="yaopop">
				<view class="yaoone">
					<text class="yaodi">{{ $t('i.确定邀请地址') }}</text>
					<view class="guan">
						<image class="btn_close" src="/static/new/btn_close.png" @click="shushow = false" />
					</view>
				</view>
				<text class="yaonum">{{ yaoadress }}</text>
				<view class="fuzhi">
					<view class="fuitem" v-if="isyouxiao" @click="copy(yaoadress)">{{ $t('i.复制') }}</view>
					<view class="fuitem feiyouxiao" v-if="!isyouxiao">{{ $t('i.非有效地址') }}</view>
				</view>
				<view class="botpop">
					<view class="qubtn" @click="cancelParent()">{{ $t('i.取消') }}</view>
					<view class="qubtn quedin wuxiao" v-if="!isyouxiao">{{ $t('i.确定') }}</view>
					<view class="qubtn quedin" v-if="isyouxiao" @click="confirmParent()">{{ $t('i.确定') }}</view>
				</view>
			</view>
		</u-popup>

		<!-- 流动性弹窗 -->
		<u-popup v-model="liushow" mode="bottom" width="75%" @close="liushow = false">
			<view class="liupop">
				<view class="yaoone">
					<text class="liuname">{{ $t('i.流动性') }}</text>
					<view class="guan">
						<image class="btn_close" src="/static/new/btn_close.png" @click="liushow = false" />
					</view>

				</view>
				<view class="duitwo">
					<view class="uone">
						<view class="flex-row">
							<image class="usdt" src="/static/new/logo.png" />
							<text class="uname">BM</text>
						</view>
						<text class="yue">{{ $t('i.余额') }}:{{ formatEther(bmBal) }}</text>
					</view>
					<view class="utwo">
						<u-input class="shuru" v-model="aboveinput" @input="changeinputone" input-align="right" type="text"
							:border="false" color="#fff" :placeholder="$t('i.输入')"></u-input>
					</view>
				</view>
				<view class="qieicon">
					<image class="qie" src="/static/new/qie.png" />
				</view>
				<view class="duitwo">
					<view class="uone">
						<view class="flex-row">
							<image class="usdt" src="/static/new/usdt.png" />
							<text class="uname">USDT</text>
						</view>
						<text class="yue">{{ $t('i.余额') }}:{{ formatEther(ustdAmount) }}</text>
					</view>
					<view class="utwo">
						<u-input class="shuru" v-model="belowinput" @input="changeinputtwo" input-align="right" type="text"
							:border="false" color="#fff" :placeholder="$t('i.输入')"></u-input>
					</view>
				</view>
				<view class="quedinbtn" @click="stake60()" >{{ $t('i.确定') }}</view>
			</view>
		</u-popup>
</view>
</template>

<script>
import Nheader from '@/components/Nheader/Nheader'
import { ethers } from "ethers"
import { connectMetamask, getv2call, isNumeric, stake_usdt, getBmAmountAddLp, stake_lp, unstake, ADDRESS0 ,getReserve
} from "@/utils/dapp.js"
import parseContractError from "@/utils/parseContractError.js"
export default {
	data() {
		return {
			hbg: '#0d0e0f',
			cont: '',
			shushow: false,
			isactive: 1,//1投资列表 2赎回列表
			value: '',
			days: [
				{ id: 1, num: '3', optional: true, shouyi: '103.03' }, { id: 2, num: '5', optional: false, shouyi: '105.10' }, { id: 3, num: '7', optional: true, shouyi: '107.21' },
				{ id: 4, num: '9', optional: false, shouyi: '109.36' }, { id: 5, num: '11', optional: true, shouyi: '111.56' }, { id: 6, num: '13', optional: false, shouyi: '113.80' },
				{ id: 7, num: '15', optional: true, shouyi: '116.09' }, { id: 8, num: '30', optional: true, shouyi: '138.84' }, { id: 9, num: '60', optional: true, shouyi: '143.17' }
			],
			dayid: 0,
			notWithdrawn: [
			],
			withdrawn: [],
			mybal: 0,
			usdtbal: 0,
			timestamp: 1708338600,
			myedu: 0,
			shengyu: 0,
			bmBal: ethers.BigNumber.from('0'),
			ustdAmount: ethers.BigNumber.from('0'),
			yaoshow: false,
			yaoadress: ADDRESS0,
			parent: ADDRESS0,
			liushow: false,//流动性弹窗
			aboveinput: '',
			belowinput: '',
			canIn: true,
			debounceTimer: null, // 防抖定时器
			debounceTimertwo: null, // 
			isyouxiao:false,//是否有效
		}
	},
	components: {
		Nheader
	},
	computed: {
	},

	mounted() {

	},
	async onLoad() {
		await this.reflash()
	},
	async onShow() {
		if (uni.getStorageSync('locale')) {
			this.yuyan = uni.getStorageSync('locale')
		}
		uni.setTabBarItem({
			index: 0,
			text: this.$t('i.首页')
		})
		uni.setTabBarItem({
			index: 1,
			text: this.$t('i.市值')
		})
		uni.setTabBarItem({
			index: 2,
			text: this.$t('i.权重榜')
		})

		console.log(uni.getStorageSync('cont'))
		if (uni.getStorageSync('cont')) {
			this.cont = uni.getStorageSync('cont')
		}
		this.getorder()
	},
	onReachBottom: function() {
	},
	methods: {
		async reflash() {
			let parent = uni.getStorageSync('__inviter_____')
			if (!parent) {
				parent = ADDRESS0
			}
			if (!ethers.utils.isAddress(parent)) {
				parent = ADDRESS0
			}
			const iv2 = await getv2call(parent)
			this.mybal = parseFloat(Number(iv2.bal).toFixed(3))
			this.usdtbal = parseFloat(Number(iv2.usdtbal).toFixed(3))
			console.log({ parent: iv2.parentOf,canIn: iv2.canIn})
			this.parent = iv2.parentOf
			this.canIn = iv2.canIn
			this.bmBal = iv2.bmBal
			this.isyouxiao = iv2.isMember
			this.yaoadress = parent
			this.ustdAmount = iv2.ustdAmount
			const falgs = iv2.flags
			const myedu = parseFloat(Number(iv2.edu).toFixed(3)) + 1000
			this.myedu = myedu
			this.shengyu = (myedu - parseFloat(Number(iv2.bal).toFixed(3))).toFixed(2)
			this.days = [
				{ id: 1, num: '3', optional:  iv2.canIn && (!falgs[0]), shouyi: '103.03' },
				{ id: 2, num: '5', optional:  iv2.canIn && (!falgs[1]), shouyi: '105.10' },
				{ id: 3, num: '7', optional:  iv2.canIn && (!falgs[2]), shouyi: '107.21' },
				{ id: 4, num: '9', optional:  iv2.canIn && (!falgs[3]), shouyi: '109.36' },
				{ id: 5, num: '11', optional: iv2.canIn && (!falgs[4]), shouyi: '111.56' },
				{ id: 6, num: '13', optional: iv2.canIn && (!falgs[5]), shouyi: '113.80' },
				{ id: 7, num: '15', optional: iv2.canIn && (!falgs[6]), shouyi: '116.09' },
				{ id: 8, num: '30', optional: iv2.canIn, shouyi: '138.84' },
				{ id: 9, num: '60', optional: iv2.canIn, shouyi: '143.17' }
			]
		},
		getactive(e) {
			this.isactive = e
		},
		formatEther(num) {
			return ethers.utils.formatEther(num)
		},
		getday(e) {
			if (e.optional) {
				this.dayid = e.id
				console.log(this.dayid)
				if (this.dayid == '9') {
					//60天出弹窗
					this.liushow = true
				}
			}
		},
		copyAddr(addr) {
			console.log('3')
			uni.setClipboardData({
				data: addr,
				success: function() {
					uni.showToast({
						title: 'copied',
					});
				}
			});
		},
		async getBack(_index) {
			uni.showLoading({ title: 'loading...', mask: true })
			const result = await unstake(_index)
				.catch(e => {
					console.log(e)
					return ({ error: true, msg: e.message })
				})
			uni.hideLoading()
			if (result.error) {
				console.log(result)
				uni.showToast({
					title: "上链失败",
					icon: 'none'
				})
			} else {
				uni.showToast({
					title: "上链成功",
					icon: 'success'
				})
				await this.reflash()
				setTimeout(async () => {
					await this.getorder()
				}, 5000)
			}
		},
		async confirmParent() {
			this.yaoshow = false
			if(this.liushow){
				await this.inStake60()
			}else{
				await this.inStakeUsdrt()
			}
		},
		async cancelParent() {
			this.yaoshow = false
		},
		async inStakeUsdrt() {
			//点击确定拿到天数
			const targetDayItem = this.days.find(item => item.id === this.dayid);
			console.log({ targetDayItem })
			if(!targetDayItem){
				uni.showToast({
					title: '请选择天数',
					icon: 'none'
				})
				return
			}
			// 2. 拿到匹配项的天数字段（num），若未匹配到则给默认值
			const targetDayNum = targetDayItem.num
			// 3. 后续使用（如打印、赋值到其他变量等）

			// 示例：赋值到页面显示用的变量

			if (!isNumeric(this.value)) {
				uni.showToast({ title: "请输入数字", icon: 'none' })
				return
			}
			const amount = this.value.trim()
			let parent = this.yaoadress
			const yingshe = {
				30: 7,
				15: 6,
				13: 5,
				11: 4,
				9: 3,
				7: 2,
				5: 1,
				3: 0,
			}

			uni.showLoading({ title: 'loading...', mask: true })
			const result = await stake_usdt(amount, yingshe[targetDayNum], parent)
				.catch(e => {
					console.log(e)
					return ({ error: true, content: e })
				})
			uni.hideLoading()
			if (result.error) {
				console.log(result)
				const errmsg = parseContractError(result.content)
				uni.showToast({
					title: errmsg,
					icon: 'none'
				})
			} else {
				uni.showToast({
					title: "上链成功",
					icon: 'success'
				})
				await this.reflash()
				setTimeout(async () => {
					await this.getorder()
				}, 5000)
			}
			
		},
		async inStake60() {
			let parent = this.yaoadress
			const amount = String(this.belowinput).trim()
			const bmAmount = String(this.aboveinput).trim()
			uni.showLoading({ title: 'loading...', mask: true })
			const result = await stake_lp(ethers.utils.parseEther(amount), ethers.utils.parseEther(bmAmount), parent)
				.catch(e => {
					console.log(e)
					return ({ error: true, content: e })
				})
			uni.hideLoading()
			if (result.error) {
				console.log(result)
				const errmsg = parseContractError(result.content)
				uni.showToast({
					title: errmsg,
					icon: 'none'
				})
			} else {
				uni.showToast({
					title: "上链成功",
					icon: 'success'
				})
				await this.reflash()
				setTimeout(async () => {
					await this.getorder()
				}, 5000)
			}
		},
		async stake60(){
			let parent = uni.getStorageSync('__inviter_____')
			if (!parent) {
				parent = ADDRESS0
			}
			if (!ethers.utils.isAddress(parent)) {
				parent = ADDRESS0
			}

			if (this.parent === ADDRESS0 && parent !== ADDRESS0) {
				this.yaoadress = parent
				this.yaoshow = true
			} else {
				await this.inStake60()
			}
		},
		async getbtn() {
			let parent = uni.getStorageSync('__inviter_____')
			if (!parent) {
				parent = ADDRESS0
			}
			if (!ethers.utils.isAddress(parent)) {
				parent = ADDRESS0
			}

			if (this.parent === ADDRESS0 && parent !== ADDRESS0) {
				this.yaoadress = parent
				this.yaoshow = true
			} else {
				await this.inStakeUsdrt()
			}
		},
		async getorder() {
			const address = await connectMetamask()
			let res = await this.$u.api.orders({ address });
			console.log(res)
			let newnotWithdrawn = res.notWithdrawn
			const currentSec = Math.floor(Date.now() / 1000);
			for (let i in newnotWithdrawn) {
				const totalRemainSec = Math.max(0, newnotWithdrawn[i].expireTime - currentSec);
				newnotWithdrawn[i].remainDays = Math.max(0, Math.floor(totalRemainSec / 86400));
				// 关键修改：让 timestamp 等于“扣除天数后的剩余秒数”，不再包含天数
				newnotWithdrawn[i].timestamp = totalRemainSec - (newnotWithdrawn[i].remainDays * 86400);
				// 若仍需保留“总剩余秒数”，可新增字段（可选）
				// newnotWithdrawn[i].totalRemainSec = totalRemainSec;
			}
			this.notWithdrawn = newnotWithdrawn


			let withdrawn = res.withdrawn
			for (let i in withdrawn) {
				const totalRemainSec = Math.max(0, withdrawn[i].expireTime - currentSec);
				withdrawn[i].remainDays = Math.max(0, Math.floor(totalRemainSec / 86400));
				// 关键修改：让 timestamp 等于“扣除天数后的剩余秒数”，不再包含天数
				withdrawn[i].timestamp = totalRemainSec - (withdrawn[i].remainDays * 86400);
				// 若仍需保留“总剩余秒数”，可新增字段（可选）
				// newnotWithdrawn[i].totalRemainSec = totalRemainSec;
			}
			this.withdrawn = withdrawn
		},
		// 时间戳转 "年-月-日 时:分" 函数
		formatTime(timestamp) {
			// 时间戳为秒，需乘1000转毫秒；若为毫秒则去掉 *1000
			const date = new Date(timestamp * 1000);
			const year = date.getFullYear();
			// 月份从0开始，需加1并补零（如1月→01）
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			// 拼接并返回目标格式
			return `${year}-${month}-${day} ${hours}:${minutes}`;
		},
		gettian(dayid) {
			let days = this.days
			let tian = ''
			for (let i in days) {
				if (days[i].id == dayid) {
					tian = days[i].num
				}
			}
			return tian
		},
		getshouyi(dayid) {

			let days = this.days
			let shouyi = ''
			for (let i in days) {
				if (days[i].id == dayid) {
					shouyi = days[i].shouyi
				}
			}
			console.log({ dayid, shouyi })
			return shouyi
		},
		// 修正事件参数接收，明确拿到输入值
		changeinputone(val) { // val 直接是输入框的实时值
			this.getjisuan(1, val);
		},
		changeinputtwo(val) {
			this.getjisuan(2, val);
		},
		async getjisuan(type, val) { // 参数名改为 val，更清晰
			// 处理上面输入框（计算下面）
			if (type == 1) {
				clearTimeout(this.debounceTimer);
				// 校验输入：非数字或空值时不计算
				if (isNaN(parseFloat(val)) || val.trim() === "") {
					this.belowinput = "";
					return;
				}
				this.debounceTimer = setTimeout(async () => {
					// 用 Number() 转换确保是数字，避免字符串拼接
					const resversess = await getReserve()
					this.belowinput = Number(val) * Number(resversess.reserveusdt) / Number(resversess.reservebm)
					// $forceUpdate 冗余，Vue 响应式会自动更新，可删除
				}, 500);
			}
			// 处理下面输入框（计算上面）
			else if (type === 2) {
				clearTimeout(this.debounceTimertwo);
				if (isNaN(parseFloat(val)) || val.trim() === "") {
					this.aboveinput = "";
					return;
				}
				this.debounceTimertwo = setTimeout(async () => {
					const resversess = await getReserve()
					this.aboveinput = Number(val) * Number(resversess.reservebm) / Number(resversess.reserveusdt)
				}, 500);
			}
			this.$forceUpdate()
		}
	}
}
</script>

<style lang="scss" scoped>
page,
html {}

.newcontent {
	min-height: 100vh;
	background-color: #21252F;
	padding-bottom: 50px;

	.mbt {
		padding: 10rpx 40rpx;
	}

	.zichan {
		font-weight: bold;
		font-size: 48rpx;
		color: #F8FAFC;
	}

	.ziview {
		position: relative;
		width: 100%;
		height: 166px;
		border-radius: 40rpx;
		margin-top: 32rpx;

		.caibg {
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 40rpx;
		}

		.chanitem {
			position: relative;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.chanview {
				padding: 4rpx 20rpx;
				background: linear-gradient(90deg, #CFFE50 0%, rgba(207, 254, 80, 0) 100%);
				border-radius: 40rpx 0px 40rpx 0px;
				position: absolute;
				left: 0;
				top: 0;
				font-weight: bold;
				font-size: 15px;
				color: #21252F;
			}
		}

		.zunum {
			font-weight: 400;
			font-size: 30rpx;
			color: #CFFE50;
		}

		.zunums {
			font-weight: bold;
			font-size: 36px;
			color: #CFFE50;
			display: inline-block;
			position: relative;
			top: 8rpx;
			margin-right: 10rpx;
		}

		.zibtn {
			min-width: 194px;
			height: 40px;
			background: #39CC77;
			border-radius: 8px 8px 8px 8px;
			align-items: center;
			justify-content: center;
			display: flex;
			font-weight: bold;
			font-size: 14px;
			color: #FAFAFA;
			margin-top: 35rpx;
		}
	}

	.bmview {
		margin: 20rpx;
		height: 144px;
		border-radius: 10px 10px 10px 10px;
		position: relative;

		.mbg {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.bmitem {
			position: relative;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			padding: 50rpx 35rpx;

			.bmtit {
				font-weight: 400;
				font-size: 12px;
				color: #4CFAB5;
				display: inline-block;
				max-width: 176px;
				margin-bottom: 7px;
			}

			.bmgui {
				font-weight: 400;
				font-size: 12px;
				color: #FFFFFF;
				display: block;
				margin: 0rpx 0 14rpx;
			}

			.gju {
				display: flex;
				flex-direction: row;
				margin-bottom: 7px;

				.guiitem {
					padding: 4rpx 10rpx;
					background: linear-gradient(90deg, #4BFBB3 0%, #28B2BC 100%);
					border-radius: 3px 3px 3px 3px;
					font-weight: 400;
					font-size: 12px;
					color: #162424;
				}
			}

			.rihua {
				font-weight: 400;
				font-size: 12px;
				color: #FFFFFF;
			}
		}
	}
}

.bang {
	// padding: 30rpx;
	// background: #2B313D;
	// border-radius: 16px 16px 16px 16px;
	// margin: 20rpx;
	margin: 60rpx 20rpx 30rpx;

	.bone {
		height: 32px;
		background: #2B313D;
		border-radius: 12rpx;
		border: 1px solid rgba(130, 138, 153, 0.4);
		display: flex;
		flex-direction: row;
		margin: 0 20rpx 30rpx;

		.boitem {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 400;
			font-size: 14px;
			color: #FFFFFF;
			border-radius: 10rpx;
		}

		.bactive {
			background: #39CC77;
			color: #fff;
		}
	}

	.pai {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx 0;

		.one {
			width: 15%;
		}

		.two {
			width: 38%;
		}

		.three {
			width: 22%;
		}

		.four {
			width: 25%;
		}

		.hmiao {
			font-weight: 400;
			font-size: 12px;
			color: #FFFFFF;
			display: inline-block;
			text-align: center;
			max-width: 90%;

		}

		.hmiaotwo {
			font-weight: 400;
			font-size: 12px;
			color: #94A3B8;
			display: inline-block;
			text-align: center;
			max-width: 90%;
		}

		.flex-row {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.oneicon {
			width: 60rpx;
			height: 40rpx;
		}

		.hname {
			font-weight: 400;
			font-size: 14px;
			color: #FFFFFF;
			display: block;
			text-align: center;
		}

		.hong {
			color: #FF7171;
		}

		.lv {
			color: #39CC77;
		}

		.cheng {
			color: #FE9605;
		}

	}

	.tnav {
		background: #2B313D;
		border-radius: 20rpx;
		padding: 20rpx 0;
		margin-bottom: 15rpx;

		.shuzu {
			min-width: 21px;
			min-height: 21px;
			background: #5F6A7A;
			display: inline-block;
			align-items: center;
			justify-content: center;
			padding: 3rpx 8rpx;
			border-radius: 50%;
			font-weight: 400;
			font-size: 24rpx;
			color: #FAFAFA;
			line-height: 38rpx;
		}

		.riqiinav {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 14rpx;
			justify-content: flex-end;

			.riqi {
				font-weight: 400;
				font-size: 12px;
				color: #94A3B8;
				max-width: 90%;
				display: inline-block;
			}

			.price {
				font-weight: 400;
				font-size: 12px;
				color: #39CC77;
			}

			.pricered {
				font-weight: 400;
				font-size: 12px;
				color: #FF7171;
			}

			.shu {
				// min-width: 16px;
				min-height: 16px;
				background: #5F6A7A;
				display: inline-block;
				align-items: center;
				justify-content: center;
				padding: 2rpx 8rpx;
				border-radius: 50%;
				font-weight: 400;
				font-size: 24rpx;
				color: #FAFAFA;
				line-height: 38rpx;
				margin-left: 8rpx;
			}

			.lvse {
				background-color: rgba(57, 204, 119, 0.5);
			}

			.hongse {
				background-color: rgba(233, 106, 107, 0.5);
			}

		}

		.riqiinav:last-child {
			margin-bottom: 0;
		}

		.tianshu {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.tian {
				font-weight: bold;
				font-size: 12px;
				color: #39CC77;
			}

			.daojishi {
				font-weight: bold;
				font-size: 12px;
				color: #39CC77;
				display: inline-block;
				margin-top: 5rpx;
			}
		}

		.shubtn {
			padding: 6rpx 16rpx;
			background: linear-gradient(270deg, #FEC854 0%, #FFE9B8 100%);
			border-radius: 50rpx;
			font-weight: 400;
			font-size: 12px;
			color: #4A291A;
			display: inline-block;
			min-width: 64px;
			text-align: center;

		}

		.shuhui {
			background: #94A3B8;
			color: #FFFFFF;
		}
	}
}

.shupop {
	background: #1C222E;
	border-radius: 24px 24px 0px 0px;
	padding: 30rpx 0;
	position: relative;

	.guan {
		display: flex;
		flex-direction: row;
		width: 100%;

	}

	.btn_close {
		margin-left: auto;
		width: 48rpx;
		height: 48rpx;
		margin-right: 30rpx;
	}

	.zhu {
		display: flex;
		flex-direction: row;

		.zhuitem {
			padding: 10rpx 20rpx;
			background: rgba(238, 169, 51, 0.3);
			border-radius: 0px 13px 13px 0px;
			display: flex;
			flex-direction: row;
			align-items: center;
			font-weight: 400;
			font-size: 12px;
			color: #EEA933;
		}
	}

	.dayview {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 30px 10px 0;

		.dayitem {
			width: 20%;
			padding: 0 8px;
			margin-bottom: 15px;

			.daynum {
				padding: 12rpx 10rpx;
				border-radius: 50rpx;
				border: 1px solid #384860;
				font-weight: normal;
				font-size: 14px;
				color: #828A99;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.hong {
				background: #FF7171;
				color: #fff;
				border: 1px solid #FF7171;
			}

			.white {
				border: 1px solid #FFFFFF;
				color: #fff;
			}
		}
		.widthauto{
			width: auto;
		}

	}

	.shupop {
		display: flex;
		flex-direction: column;
		margin: 0rpx 50rpx;

		.shuone {
			display: flex;
			flex-direction: row;
			align-items: center;

			.shuname {
				font-weight: 400;
				font-size: 12px;
				color: #FFFFFF;
			}

			.yue {
				margin-left: auto;
				font-weight: 400;
				font-size: 12px;
				color: #828A99;
			}
		}

		.shuusdt {
			margin-top: 32rpx;
			height: 48px;
			border-radius: 12px 12px 12px 12px;
			border: 1px solid rgba(255, 255, 255, 0.2);
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 30rpx;

			/deep/.uni-input-input {
				color: #fff;
			}
		}

		.danwei {
			font-weight: normal;
			font-size: 12px;
			color: #A4A6AB;
			margin-left: auto;
		}
	}

	.shiname {
		font-weight: 400;
		font-size: 12px;
		color: #828A99;
		display: block;
		margin-top: 15rpx;

		.shinum {
			color: #39CC77;
		}
	}

	.quebtn {
		height: 56px;
		background: #39CC77;
		border-radius: 28px 28px 28px 28px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 16px;
		color: #FFFFFF;
		margin-top: 40rpx;
	}
}

/deep/.u-drawer-bottom {
	background-color: transparent !important;
}

/deep/.u-mode-center-box {
	background-color: transparent;
}

.yaopop {
	background: #1C222E;
	border-radius: 40rpx;
	padding: 40rpx;

	.guan {
		display: flex;
		flex-direction: row;
		position: absolute;
		right: 0;

	}

	.btn_close {
		width: 48rpx;
		height: 48rpx;

	}

	.yaoone {
		display: flex;
		flex-direction: row;
		position: relative;
		justify-content: center;
		align-items: center;
	}

	.yaodi {
		display: flex;
		text-align: center;
		font-size: 30rpx;
		font-weight: 500;
		color: #fff;
	}

	.yaonum {
		margin: 30rpx 0;
		color: #fff;
		font-size: 28rpx;
		font-weight: normal;
		white-space: normal;
		display: inline-block;
		text-align: center;
		width: 100%;
		/* 固定容器宽度 */
		word-wrap: break-word;
		/* 拆分长单词/URL */
		white-space: normal;
		/* 自动换行，合并多余空格 */
	}

	.fuzhi {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin: 8rpx 0 0rpx;

		.fuitem {
			padding: 4rpx 20rpx;
			border: 1rpx solid #39CC77;
			font-size: 28rpx;
			font-weight: normal;
			color: #39CC77;
			border-radius: 50rpx;
		}
		.feiyouxiao{
			border: 1rpx solid #eee;
			color: #eee;
			padding: 4rpx 25rpx;
		}

	}

	.botpop {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 50rpx;

		.qubtn {
			border: 1rpx solid #eee;
			color: #fff;
			width: 48%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 20rpx;
		}

		.quedin {
			background: #39CC77;
			border: none;
			color: #fff;
		}
		.wuxiao{
			background: #ccc;
			color: #111;
		}
	}
}

.liupop {
	background: #1C222E;
	border-radius: 24rpx 24rpx 0 0;
	padding: 40rpx;

	.guan {
		display: flex;
		flex-direction: row;
		position: absolute;
		right: 0;

	}

	.btn_close {
		width: 48rpx;
		height: 48rpx;

	}

	.yaoone {
		display: flex;
		flex-direction: row;
		position: relative;
		justify-content: center;
		align-items: center;
	}

	.liuname {
		display: flex;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #39CC77;
	}

	.duitwo {
		padding: 30rpx 0;

		.uone {
			display: flex;
			flex-direction: row;
			align-items: center;

			.usdt {
				width: 48rpx;
				height: 48rpx;
				margin-right: 10rpx;
			}

			.uname {
				font-weight: 400;
				font-size: 32rpx;
				color: #F8FAFC;
			}

			.xia {
				width: 20rpx;
				height: 16rpx;
				margin-left: 10rpx;
				position: relative;
				top: 3rpx;
			}

			.yue {
				font-weight: 400;
				font-size: 12px;
				color: #828A99;
				margin-left: auto;
			}
		}

		.utwo {
			padding: 20rpx;
			border-radius: 12px 12px 12px 12px;
			border: 1px solid rgba(255, 255, 255, 0.2);
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;

			.shuru {
				font-size: 30rpx;
				color: #fff;
			}

			/deep/.uni-input-input {
				color: #fff;
			}

			.shubiao {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				margin-top: 6rpx;
				flex-wrap: wrap;

				.bq {
					padding: 2rpx 15rpx;
					border-radius: 50rpx;
					border: 2rpx solid #EEA933;
					margin-left: 10rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #EEA933;
					margin-bottom: 10rpx;
				}
			}
		}

		.jiaview {
			display: flex;
			margin-top: 20rpx;
			align-items: center;
			flex-direction: row;

			.jianame {
				font-weight: 400;
				font-size: 24rpx;
				color: #828A99;
			}
		}

	}
}

.flex-row {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.qieicon {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;

	.qie {
		width: 54rpx;
		height: 54rpx;

	}
}

.quedinbtn {
	height: 56px;
	background: #39CC77;
	border-radius: 28px 28px 28px 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 400;
	font-size: 16px;
	color: #FFFFFF;
	margin-top: 40rpx;
}</style>
